<template>
	<view class="content">
		<image class="logo" src="/static/RTAB8$_R7R6@A9_@X~4~3TQ.png"></image>
		<uni-forms labelWidth="50" ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item required label="坐标" name="coordinate">
				<uni-easyinput suffixIcon='location-filled' @iconClick='chooseLocation' type="text"
					v-model="formData.coordinate" placeholder="点击左侧自动获取">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required label="地址" name="address">
				<uni-easyinput type="text" v-model="formData.address" placeholder="点击上边自动获取">
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit">修改</button>
	</view>
</template>

<script>
	import {
		geocoder
	} from '@/apis/register.js';
	import {
		myCheckToken
	} from '@/apis/login.js';
	import {
		updateLocation
	} from '@/apis/mobile.js';
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					coordinate: '',
					address: '',
				},
				rules: {
					coordinate: {
						rules: [{
							required: true,
							errorMessage: '坐标不能为空',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '地址不能为空',
						}]
					}
				}
			}
		},
		async onLoad() {
			await myCheckToken(uni.getStorageInfoSync('token'));
		},
		methods: {
			async updateLocationFn() {
				// 108.274358,22.848922
				const res = await updateLocation({
					coordinate: 11111122,
					address: 'asdfads22'
				})
				if (!res.data.success) return uni.showToast({
					title: res.data.msg,
					icon: 'none'
				})
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				})
			},
			submit() {
				this.$refs.form.validate().then(async userInfo => {
					console.log('正确信息：', userInfo);
					const res = await updateLocation(userInfo)
					console.log(res);
					if (!res.data.success) return uni.showToast({
						title: res.data.msg,
						icon: 'error',
						duration: 2000
					});

					uni.showToast({
						title: res.data.msg,
						icon: 'success',
						duration: 2000
					});
					// 修改成功跳转
					setTimeout(() => {
						uni.navigateTo({
							url: 'pages/home/home'
						})
					}, 2000)
				}).catch(err => {
					console.log('错误信息：', err);
				})
			},


			chooseLocation() {
				console.log("-----------------------------");
				uni.chooseLocation({
					success: async (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						if (!res.address) return console.log('获取地址失败');
						// 经纬度
						this.formData.coordinate = `${res.longitude},${res.latitude}`
						// 坐标查地址
						const result = await geocoder({
							coordinate: `${res.latitude},${res.longitude}`
						})
						console.log('坐标查地址', result);
						if (result.data.status) return console.log('获取地址失败1');
						const {
							nation,
							province,
							city,
							district
						} = result.data.result.address_component
						// 地址
						this.formData.address = `${nation}-${province}-${city}-${district}`;
					},
					fail(e) {
						console.log('获取失败', e);
					}

				});

			}

		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 400rpx;
		width: 400rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
</style>
